<template>
  <div class="p-2">
    <!--查询区域-->
    <div class="jeecg-basic-table-form-container">
      <a-form ref="formRef" @keyup.enter.native="reload" :model="queryParam" :label-col="labelCol" :wrapper-col="wrapperCol">
        <a-row :gutter="24">
          <a-col :lg="6">
            <a-form-item name="caregiver">
              <template #label><span title="护理员">护理员</span></template>
              <j-select-user placeholder="请选择护理员" v-model:value="queryParam.caregiver" @change="(value)=>handleFormJoinChange('caregiver',value)" allow-clear />
            </a-form-item>
          </a-col>
          <a-col :lg="6">
            <a-form-item name="expertName">
              <template #label><span title="专家姓名">专家姓名</span></template>
              <a-input placeholder="请输入专家姓名" v-model:value="queryParam.expertName" allow-clear ></a-input>
            </a-form-item>
          </a-col>
          <template v-if="toggleSearchStatus">
            <a-col :lg="6">
              <a-form-item name="memberStatus">
                <template #label><span title="会员状态">会员状态</span></template>
                <j-select-multiple placeholder="请选择会员状态" v-model:value="queryParam.memberStatus" dictCode="member_status" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="memberName">
                <template #label><span title="会员姓名">会员姓名</span></template>
                <a-input placeholder="请输入会员姓名" v-model:value="queryParam.memberName" allow-clear ></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="phone">
                <template #label><span title="手机号码">手机号码</span></template>
                <a-input placeholder="请输入手机号码" v-model:value="queryParam.phone" allow-clear ></a-input>
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="memberGender">
                <template #label><span title="会员性别">会员性别</span></template>
                <j-select-multiple placeholder="请选择会员性别" v-model:value="queryParam.memberGender" dictCode="sex" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="identityLabel">
                <template #label><span title="身份标签">身份标签</span></template>
                <j-select-multiple placeholder="请选择身份标签" dictCode="identity_label" v-model:value="queryParam.identityLabel" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="politicalStatus">
                <template #label><span title="政治面貌">政治面貌</span></template>
                <j-select-multiple placeholder="请选择政治面貌" v-model:value="queryParam.politicalStatus" dictCode="political_status" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="personnelCategory">
                <template #label><span title="人员类别">人员类别</span></template>
                <j-select-multiple placeholder="请选择人员类别" v-model:value="queryParam.personnelCategory" dictCode="personnel_category" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="residentialStatus">
                <template #label><span title="居住状况">居住状况</span></template>
                <j-select-multiple placeholder="请选择居住状况" v-model:value="queryParam.residentialStatus" dictCode="residential_status" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="disabilitySituation">
                <template #label><span title="失能情况">失能情况</span></template>
                <j-select-multiple placeholder="请选择失能情况" v-model:value="queryParam.disabilitySituation" dictCode="disability_situation" allow-clear />
              </a-form-item>
            </a-col>
            <a-col :lg="6">
              <a-form-item name="serviceType">
                <template #label><span title="服务类型">服务类型</span></template>
                <j-select-multiple placeholder="请选择服务类型" v-model:value="queryParam.serviceType" dictCode="service_type" allow-clear />
              </a-form-item>
            </a-col>
          </template>
          <a-col :xl="6" :lg="7" :md="8" :sm="24">
            <span style="float: left; overflow: hidden" class="table-page-search-submitButtons">
              <a-col :lg="6">
                <a-button type="primary" preIcon="ant-design:search-outlined" @click="reload">查询</a-button>
                <a-button preIcon="ant-design:reload-outlined" @click="searchReset" style="margin-left: 8px">重置</a-button>
                <a @click="toggleSearchStatus = !toggleSearchStatus" style="margin-left: 8px">
                  {{ toggleSearchStatus ? '收起' : '展开' }}
                  <Icon :icon="toggleSearchStatus ? 'ant-design:up-outlined' : 'ant-design:down-outlined'" />
                </a>
              </a-col>
            </span>
          </a-col>
        </a-row>
      </a-form>
    </div>
    <!--引用表格-->
   <BasicTable @register="registerTable" :rowSelection="rowSelection">
     <!--插槽:table标题-->
      <template #tableTitle>
          <a-button type="primary" v-auth="'ec:ec_archive_info:add'"  @click="handleAdd" preIcon="ant-design:plus-outlined"> 新增</a-button>
          <a-button  type="primary" v-auth="'ec:ec_archive_info:exportXls'"  preIcon="ant-design:export-outlined" @click="onExportXls"> 导出</a-button>
          <j-upload-button  type="primary" v-auth="'ec:ec_archive_info:importExcel'"  preIcon="ant-design:import-outlined" @click="onImportXls">导入</j-upload-button>
          <a-dropdown v-if="selectedRowKeys.length > 0">
              <template #overlay>
                <a-menu>
                  <a-menu-item key="1" @click="batchHandleDelete">
                    <Icon icon="ant-design:delete-outlined"></Icon>
                    删除
                  </a-menu-item>
                </a-menu>
              </template>
              <a-button v-auth="'ec:ec_archive_info:deleteBatch'">批量操作
                <Icon icon="mdi:chevron-down"></Icon>
              </a-button>
        </a-dropdown>
        <!-- 高级查询 -->
        <super-query :config="superQueryConfig" @search="handleSuperQuery" />
      </template>
       <!--操作栏-->
      <template #action="{ record }">
        <TableAction :actions="getTableAction(record)" :dropDownActions="getDropDownAction(record)"/>
      </template>
      <!--字段回显插槽-->
      <template v-slot:bodyCell="{ column, record, index, text }">
        <template v-if="column.dataIndex==='region'">
          <!--省市区字段回显插槽-->
          {{ getAreaTextByCode(text) }}
        </template>
        <template v-if="column.dataIndex==='registeredResidence'">
          <!--省市区字段回显插槽-->
          {{ getAreaTextByCode(text) }}
        </template>
      </template>
    </BasicTable>
    <!-- 表单区域 -->
    <EcArchiveInfoModal @register="registerModal" @success="handleSuccess"></EcArchiveInfoModal>
  </div>
</template>

<script lang="ts" name="ec-ecArchiveInfo" setup>
  import {ref, reactive, computed, unref} from 'vue';
  import {BasicTable, useTable, TableAction} from '/@/components/Table';
  import { useListPage } from '/@/hooks/system/useListPage'
  import {useModal} from '/@/components/Modal';
  import EcArchiveInfoModal from './components/EcArchiveInfoModal.vue'
  import {columns, superQuerySchema} from './EcArchiveInfo.data';
  import {list, deleteOne, batchDelete, getImportUrl,getExportUrl} from './EcArchiveInfo.api';
  import {downloadFile} from '/@/utils/common/renderUtils';
  import { useMessage } from '/@/hooks/web/useMessage';
  import JDictSelectTag from '/@/components/Form/src/jeecg/components/JDictSelectTag.vue';
  import JSelectMultiple from '/@/components/Form/src/jeecg/components/JSelectMultiple.vue';
  import JSelectUser from '/@/components/Form/src/jeecg/components/JSelectUser.vue';
  import JAreaLinkage from '/@/components/Form/src/jeecg/components/JAreaLinkage.vue';
  import { getAreaTextByCode } from '/@/components/Form/src/utils/Area';
  import { getDateByPicker } from '/@/utils';
  import { useUserStore } from '/@/store/modules/user';

  const fieldPickers = reactive({
  });
  const formRef = ref();
  const queryParam = reactive<any>({});
  const checkedKeys = ref<Array<string | number>>([]);
  //注册model
  const [registerModal, {openModal}] = useModal();
  const userStore = useUserStore();
  const { createMessage } = useMessage();
   //注册table数据
  const { prefixCls,tableContext,onExportXls,onImportXls } = useListPage({
      tableProps:{
           title: '档案信息管理',
           api: list,
           columns,
           canResize:true,
           useSearchForm: false,
           actionColumn: {
               width: 120,
               fixed:'right'
           },
           beforeFetch: async (params) => {
             for (let key in fieldPickers) {
                if (queryParam[key] && fieldPickers[key]) {
                  queryParam[key] = getDateByPicker(queryParam[key], fieldPickers[key]);
                }
             }
             return Object.assign(params, queryParam);
           },
        },
        exportConfig: {
            name:"档案信息管理",
            url: getExportUrl,
            params: queryParam,
        },
        importConfig: {
            url: getImportUrl,
            success: handleSuccess
        },
    })

  const [registerTable, {reload},{ rowSelection, selectedRowKeys }] = tableContext

  // 高级查询配置
  const superQueryConfig = reactive(superQuerySchema);

  /**
   * 高级查询事件
   */
  function handleSuperQuery(params) {
    Object.keys(params).map((k) => {
      queryParam[k] = params[k];
    });
    reload();
  }

   /**
    * 新增事件
    */
  function handleAdd() {
     openModal(true, {
       isUpdate: false,
       showFooter: true,
     });
  }
   /**
    * 编辑事件
    */
  function handleEdit(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: true,
     });
   }
   /**
    * 详情
   */
  function handleDetail(record: Recordable) {
     openModal(true, {
       record,
       isUpdate: true,
       showFooter: false,
     });
   }
   /**
    * 删除事件
    */
  async function handleDelete(record) {
     await deleteOne({id: record.id}, handleSuccess);
   }
   /**
    * 批量删除事件
    */
  async function batchHandleDelete() {
     await batchDelete({ids: selectedRowKeys.value},handleSuccess);
   }
   /**
    * 成功回调
    */
  function handleSuccess() {
      (selectedRowKeys.value = []) && reload();
   }
   /**
      * 操作栏
      */
  function getTableAction(record){
       return [
         {
           label: '编辑',
           onClick: handleEdit.bind(null, record),
           auth: 'ec:ec_archive_info:edit'
         }
       ]
   }
     /**
        * 下拉操作栏
        */
  function getDropDownAction(record){
       return [
         {
           label: '详情',
           onClick: handleDetail.bind(null, record),
         }, {
           label: '删除',
           popConfirm: {
             title: '是否确认删除',
             confirm: handleDelete.bind(null, record),
             placement: 'topLeft'
           },
           auth: 'ec:ec_archive_info:delete'
         }

       ]
   }




  /* ----------------------以下为原生查询需要添加的-------------------------- */
  const toggleSearchStatus = ref<boolean>(false);
  const labelCol = reactive({
    xs:24,
    sm:4,
    xl:6,
    xxl:4
  });
  const wrapperCol = reactive({
    xs: 24,
    sm: 20,
  });
  /**
   * 重置
   */
  function searchReset() {
    formRef.value.resetFields();
    selectedRowKeys.value = [];
    //刷新数据
    reload();
  }

  /**
   * form点击事件(以逗号分割)
   * @param key
   * @param value
   */
  function handleFormJoinChange(key, value) {
    if (typeof value != 'string') {
      queryParam[key] = value.join(',');
    }
  }
</script>
<style lang="less" scoped>
  .jeecg-basic-table-form-container {
    padding: 0;
    .table-page-search-submitButtons {
      display: block;
      margin-bottom: 24px;
      white-space: nowrap;
    }
    .query-group-cust{
      min-width: 100px !important;
    }
    .query-group-split-cust{
      width: 30px;
      display: inline-block;
      text-align: center
    }
    .ant-form-item:not(.ant-form-item-with-help){
      margin-bottom: 16px;
      height: 32px;
    }
    :deep(.ant-picker),:deep(.ant-input-number){
      width: 100%;
    }
  }
</style>
